<template>
    <div>
        <header class="bus-head">
            <div class="bus-head-bg" style="background-image: url(https://fuss10.elemecdn.com/1/32/c75a72f674052473fb35b5c8ab1d7jpeg.jpeg?imageMogr/format/webp/thumbnail/!40p/blur/50x40/);"></div>
            <nav class="head-nav">
                <i class="arrow-left"></i>
            </nav>
            <section class="bus-box">
                <figure>
                    <img src="" alt="">
                </figure>
                <aside class="bus-dec">
                    <div class="bus-dec-container">
                        <h2 class="dev-title">{{shopHeadData.name}}</h2>
                        <p class="dec-delivery">商家配送／{{shopHeadData.order_lead_time}}分钟送达／配送费¥{{deliveryFee}}</p>
                        <p class="dec-notice">{{promotionInfo}}</p>
                    </div>
                    <div class="bus-nav">
                        <i class="arrow-right"></i>
                    </div>
                </aside>
            </section>
            <section class="bus-active" v-if="activities">
                <div class="active-dec">
                    <i class="active-icon" :style="{backgroundColor:'#' + activities[0].icon_color,borderColor:'#' + activities[0].icon_color }">{{activities[0].icon_name}}</i> 
                    <span>{{activities[0].description}}</span>
                </div>
                <div class="active-count">
                    {{activities.length}}个活动
                </div>
            </section>
        </header>
        <section class="change-tab">
            <ul>
                <router-link :to="{ name: 'shopview',query:{id:this.shopId,geohash:this.geohash}}" tag="li">
                    <span class="tab-title">商品</span>
                </router-link>
                <router-link :to="{ name: 'ratingview',query:{id:this.shopId,geohash:this.geohash}}" tag="li">
                    <span class="tab-title">评价</span>
                </router-link>
            </ul>
        </section>
        <router-view></router-view>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {
        mapState,
        mapActions,
        mapGetters,
        mapMutations
    } from 'vuex'
    export default {
        data() {
            return {
                shopId: '',
                geohash: '',
                shopHeadData: '',
                active_icon_color: ''
            }
        },
        created() {
            this.geohash = this.$route.query.geohash;
            this.shopId = this.$route.query.id;
        },
        mounted() {
            this.initData();
        },
        computed: {
            ...mapGetters([
                'latitude', 'longitude'
            ]),
            // 公告信息
            promotionInfo() {
                return this.shopHeadData.promotion_info || '欢迎光临，用餐高峰期请提前下单，谢谢。'
            },
            // 配送费
            deliveryFee() {
                if (this.shopHeadData) {
                    return this.shopHeadData.float_delivery_fee;
                } else {
                    return 0;
                }
            },
            activities() {
                if (this.shopHeadData.activities) {
                    return [...this.shopHeadData.activities]
                }
            }
        },
        methods: {
            ...mapActions([
                'RECORD_ADDRESS'
            ]),
            async initData() {
                let vm = this;
                if (!this.latitude) {
                    //获取位置信息
                    await this.$fetch('GET', '/v2/pois/' + this.geohash, {}).then(res => {
                        // 记录当前经度纬度进入vuex
                        vm.RECORD_ADDRESS(res);
                    });
                }
                // 头部内容
                await this.$fetch('GET', '/shopping/restaurant/' + this.shopId, {
                    'latitude': this.latitude,
                    'longitude': this.longitude + '&extras[]=activities&extras[]=album&extras[]=license&extras[]=identification&extras[]=statistics'
                }).then(res => {
                    this.shopHeadData = res;
                    this.getactive = true;
                });
            }
        },
        beforeDestroy() {
    
        }
    }
</script>

<style lang="stylus" scoped>
    .bus-head-bg
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #3190e8;
        background-size: cover;
        background-repeat: no-repeat;
        z-index:-1;
        &:after
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(119,103,137,.43);
    .bus-head
        position: relative;
        padding-bottom: .8rem;
        color: #fff;
        font-size: .3rem;
        .head-nav
            position: relative;
            padding: .1rem .26rem;
            .arrow-left
                display:inline-block;
                width: .67rem;
                height: .67rem;
        .bus-box
            display:flex
            figure
                width: 1.733333rem;
                height: 1.733333rem;
                border: 1px solid #fff;
                border-radius: .106667rem;
                margin: 0 .266667rem;
                img
                    height:100%;
                    width:100%;
            .bus-dec
                flex:1;
                display:flex
                .bus-dec-container
                    flex:1
                    .dev-title
                        margin: 0;
                        font-size: .46rem;
                        line-height: .46rem;
                        font-weight: 700;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    .dec-delivery
                        white-space: nowrap;
                        height: .66rem;
                        line-height: .72rem;
                    .dec-notice
                        height: .54rem;
                        line-height: .54rem;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                .bus-nav
                    .arrow-right
                        display:inline-block;
                        width: .67rem;
                        height: .67rem;
        .bus-active
            position: absolute;
            left: .26rem;
            right: .34rem;
            bottom: .13rem;
            display:flex;
            .active-dec
                flex:1;
                .active-icon
                    margin-right: .133333rem;
                    font-size: .266667rem;
                    font-style: normal;
                    line-height: 1;
                    height: .293333rem;
                    display: inline-block;
                    box-sizing: border-box;
                    text-align: center;
                    border: 1px solid;
                    border-radius: .04rem;
    .change-tab
        background:#fff
        ul
            display:flex;
            height:1.2rem;
            justify-content: space-between;
            li 
                text-align:center;
                flex:1;
                display:flex;
                align-items:center;
                justify-content: center;
                color: #666;
                border-bottom: 1px solid #ddd;
                .tab-title
                    position: relative;
                    text-align: center;
                    font-size: .38rem;
                &.router-link-active 
                    color: #3190e8;
                    span
                        &:after 
                            content: "";
                            position: absolute;
                            bottom: -.16rem;
                            left: -.066667rem;
                            right: -.066667rem;
                            height: .06rem;
                            background-color: #3190e8;
                            border-radius: .04rem;
                
</style>